<template>
	<view>
		<uni-group title="环境宣传">
			<u-swiper :height="250" :list="lun" :title="true" :effect3d="true"
			 :interval="3000" @click="click"></u-swiper>
		</uni-group>
		<uni-group title="快捷通道">
			<view class="item-container">
				<view class="thumb-box" v-for="(item1, index1) in liat" @click="tozhiyuN(item1.link)" :key="index1">
					<image class="item-menu-image" :src="item1.image" mode=""></image>
					<view class="item-menu-name">{{item1.text}}</view>
				</view>
			</view>
			
		</uni-group>
		<uni-group title="附近回收机">
			<uni-card v-for="i in 10" :title="'回收机'+i" thumbnail="../../../../static/huangbao/icons/Come%20to%20the%20door.png">
				<view>距离：500米</view>
				<view>可回收很多垃圾</view>
			</uni-card>
		</uni-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lun:[
					{image:'../../../../static/huangbao/u=1251126662,1835779098&fm=11&fmt=auto&gp=0.jpg',title:' 2019年6月5日第48个世界环境日，主场活动在中国浙江杭州举办，中国主题是“美丽中国，我是行动者”',link:''},
					{image:'../../../../static/huangbao/u=1299061469,111270754&fm=26&fmt=auto&gp=0.jpg',title:'3月份以来，西安市空气质量受PM10污染影响较大，工地扬尘又是PM10的重要来源。为强化施',link:''},
					{image:'../../../../static/huangbao/u=262416087,1088520702&fm=26&fmt=auto&gp=0.jpg',title:'5月22日国际生物多样性日来临前夕，为进一步提高公众参与生物多样性保护工作的积极性，增强社区居民',link:''},
				],
				liat:[
					{
						image:'../../../../static/huangbao/icons/Come%20to%20the%20door.png',text:'垃圾物品展示',link:'laji1'
					},
					{
						image:'../../../../static/huangbao/icons/Company%20recycling-ate.png',text:'预约上门回收',link:'yuyue'
					},
					{
						image:'../../../../static/huangbao/icons/Recycling%20classification.png',text:'信息预留',link:'xinxiyue'
					},
					{
						image:'../../../../static/huangbao/icons/Recycling%20machine.png',text:'回收垃圾历史',link:'lishi'
					},
					
				],
				
			}
		},
		methods: {
			click(){
				uni.navigateTo({
					url:'xianq'
				})
			},
			tozhiyuN(url){
				uni.navigateTo({
					url:url
				})
			},
		}
	}
</script>

<style>
	.item-container {
		display: flex;
		flex-wrap: wrap;
	}
	
	.thumb-box {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}
	
	.item-menu-image {
		width: 80rpx;
		height: 80rpx;
	}
</style>
